﻿/*
container:被裁剪图片所在的容器
btnsave:保存的按钮id
cutcontainer:裁剪后生成图片显示的容器
templatedrag:目前不支持
width:图片的宽
height:图片的高
cutwidth:要裁剪的宽
cutheight:要裁剪的高
*/
; (function($) {
    var _self = this;
    this.options = '';
    this.css = '<style type="text/css">' +
    '.bgprogress{background-image:url(js/line.GIF)}' +
    '#cut_Canvas' +
	'{' +
		'position: relative;' +
		'border:2px solid red;' +
		'overflow:hidden;' +
		'margin-left:4px; ' +
		'cursor:pointer;' +
	'}' +
	'.cut_Overlay' +
	'{' +
		'background-color:#CCCCCC;' +
	'}' +

	'#Crop' +
	'{' +
		'position: relative;' +
		'z-index: 7; ' +
		'top:0px;' +
		'left:0px;' +
		'opacity: 0.75;' +
		'filter:alpha(opacity=75);' +
	'}' +

	'.slideblock' +
	'{' +
	    'position:relative;width:174px;margin-top:10px;background-image:url(img/image_crop_track.gif);text-align:center;height:16px' +
    '}' +
    '</style>';
    this.template = '<div id="cut_Canvas" style="width:{width}px;height:{height}px">' +
    '<div id="cut_imgoverlayer" style="position:relative;">' +
    '<table id="Crop" cellpadding="0" cellspacing="0" border="0" style="width:{width}px;height:{height}px">' +
                                        '<tr>' +
                                                '<td style="height:{tdheight}px" colspan="3" class="cut_Overlay"></td>' +
                                        '</tr>' +
                                        '<tr>' +
                                                '<td style="width: {tdwidth}px" class="cut_Overlay"></td>' +
                                                '<td id="tdselect" style="width: {cutwidth}px; height: {cutheight}px; border-width: 1px; border-style: solid; border-color: white;vertical-align:top"><div id="cut_selectdiv"></div></td>' +
                                                '<td style="width: {tdwidth}px" class="cut_Overlay"></td>' +
                                        '</tr>' +
                                        '<tr>' +
                                                '<td style="height: {tdheight}px" colspan="3" class="cut_Overlay"></td>' +
                                        '</tr>' +
                                        '</table>' +
                                 '<div style="position: relative; top: 0px; left: 0px;">' +
    '<img src="{picurl}" style="position:relative;top:-{height}px;left:0px;"/></div>' +
    '</div>' +
    '</div>';
    $.fn.extend({
        CutImg: function(options) {
            var settings = {
                container: '',
                btnsave: '',
                cutcontainer: '',
                templatedrag: _self.template,
                width: 440,
                height: 330,
                cutwidth: 160,
                cutheight: 160
            };
            $(_self.css).appendTo($('head'));
            if (settings) {
                $.extend(settings, options);
            }

            //将对应的模板赋值给相应的容器
            var container = this;
            if (settings.container != '') {
                container = $('#' + settings.container);
            }
            settings.templatedrag = settings.templatedrag.replace(/{picurl}/g, settings.picurl)
            .replace(/{width}/g, settings.width)
            .replace(/{height}/g, settings.height)
            .replace(/{tdheight}/g, (settings.height - settings.cutheight) / 2)
            .replace(/{tdwidth}/g, (settings.width - settings.cutwidth - 2) / 2)
            .replace(/{cutheight}/g, settings.cutheight)
            .replace(/{cutwidth}/g, settings.cutwidth);
            container.html(settings.templatedrag);
            var imgobj = $('#cut_Canvas img'), blockobj = $('.slideblock'), overlayerobj = $("#cut_imgoverlayer");
            blockobj.html('<img style="position:relative;" src="Img/grip.gif" alt="" class="cut_slide"/>');
            var slideobj = $('.cut_slide');
            var imginfo = {
                height: imgobj.height(),
                width: imgobj.width()
            }
            var oldposition = slideobj.offset().left;
            var resizepic = function() {
                var x = slideobj.offset().left;

                var rate = 1 + (x - oldposition) / 163; //163=174-11,即外层容器的宽度减去滑块的宽度
                var width = imginfo.width * rate;
                var height = imginfo.height * rate;

                imgobj.width(width);
                imgobj.height(height);
            };
            slideobj.draggable({ axis: 'x', containment: 'parent', drag: resizepic });
            overlayerobj.draggable({
                cursor: 'move',
                helper: function(event) {
                    return imgobj;
                },
                grid: [1, 1],
                stop: function() {
                    $(this).data("draggable").cancelHelperRemoval = true;
                }
            });

            blockobj.click(function(e) {
                slideobj.css('left', (e.pageX - oldposition - 5.5) + 'px');
                resizepic();
            });

            $('#' + settings.btnsave).click(savepic);
            var cutcontainer = $('#' + settings.cutcontainer);
            function savepic() {
                var picPosition = {
                    left: imgobj.offset().left - overlayerobj.offset().left,
                    top: imgobj.offset().top - overlayerobj.offset().top
                };
                var selectPosition = {
                    left: $('#cut_selectdiv').offset().left - overlayerobj.offset().left,
                    top: $('#cut_selectdiv').offset().top - overlayerobj.offset().top
                };
                $.ajax({
                    type: "post",
                    url: "upload.ashx?action=cut",
                    data: "x=" + Math.ceil(picPosition.left) + '&y=' + Math.ceil(picPosition.top) + '&width=' + imgobj.width() + '&height=' + imgobj.height() + '&selectx=' + Math.ceil(selectPosition.left) + '&selecty=' + Math.ceil(selectPosition.top) + '&cutwidth=' + Math.ceil(settings.cutwidth) + '&cutheight=' + Math.ceil(settings.cutheight) + '&oldwidth=' + Math.ceil(imginfo.width) + '&oldheight=' + Math.ceil(imginfo.height),
                    success: function(result) {
                        cutcontainer.html('');
                        $('<img/>').attr('src', result).attr('border', '1px solid gray').appendTo(cutcontainer);
                    },
                    error: function() {
                        alert('失败');
                    }
                });
            };

        }
    });
})(jQuery);




//jQuery.fn.extend({
//    check: function() {
//        return this.each(function() { this.checked = true; });
//    },
//    uncheck: function() {
//        return this.each(function() { this.checked = false; });
//    }
//});

//$.fn.messager = function(options) {
//    var defaults = {
//        title: "this is a test!"
//    };
//    $.extend(defaults, options);
//    alert(defaults.title);
//    return this;
//};